<template>
	<a-row :gutter="10" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-col :span="5">
			<Group relationTypeCode="COMP" height="calc(72vh)" :groupTreeUrl="groupTreeUrl" :selectTree="selectTree"></Group>
		</a-col>

		<a-col :span="19">

			<a-row justify="start" class="mb-2">
				<a-col :span="24">
					<a-card :bordered="false">
						<a-space>
							<a-input-search placeholder="请输入内容" v-model:value="keywords"
								@search="refresh"></a-input-search>
							<a-button type="primary" @click="add">新增</a-button>
							<a-button @click="downloadDemo">下载demo包</a-button>
						</a-space>
					</a-card>
				</a-col>
			</a-row>
			<a-row justify="start">
				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<a-card :bordered="false">
						<h-table ref="tableRef" :paged="false" :columns="columns" :data="queryCompList" height="calc(71vh)">

						</h-table>
					</a-card>
				</a-col>
			</a-row>
		</a-col>
	</a-row>


	<drag-modal v-model:visible="compDiag.visible" @ok="saveComp" @close="compDiag.visible = false" :closable="false"
		width="300px" :okFlag="!compDiag.systemFlag">
		<a-form :model="compDiag">
			<a-form-item label="组件名称">
				<a-input v-model:value="compDiag.compName"></a-input>
			</a-form-item>
			<a-form-item label="组件编码">
				<a-input v-model:value="compDiag.compCode"></a-input>
			</a-form-item>
			<a-form-item label="分组编码">
				<a-input disabled v-model:value="compDiag.groupCode"></a-input>
			</a-form-item>
			<a-form-item label="分组名称">
				<a-input disabled v-model:value="compDiag.groupName"></a-input>
			</a-form-item>
			<a-form-item label="图标">

				<span class="iconView" v-if="compDiag.icon != null && compDiag.icon.indexOf('svg') != -1"
					v-html="compDiag.icon" style="position: absolute;left:100px;top:-5px;">
				</span>

				<span v-else-if="compDiag.icon != null && fileList.length == 0"
					style="position: absolute;left:100px;top:-15px;">
					<a-image style="width: 50px; height: 50px" :src="compDiag.icon" />
				</span>

				<a-upload ref="upload" v-model:file-list="fileList" :multiple="false" :before-upload="beforeUpload"
					@change="progress">
					<a-button>
						<upload-outlined></upload-outlined>
						上传
					</a-button>
					<template #itemRender="{ file, actions }">
						<div style="position: absolute;left: 100px;top:-10px;">
							<a-image id="ssgg" style="width: 50px; height: 50px" :src="compDiag.icon" />
						</div>
					</template>
				</a-upload>


			</a-form-item>
		</a-form>
	</drag-modal>

	<a-modal v-model:open="compVersionDiag" :width="1000" :footer="null" :destroyOnClose="true" :closable="false">
		<ProcessCompVersionManager ref="versionManager"
		:compCode ="currentCompCode" :systemFlag="systemFlag"/>
	</a-modal>
</template>

<script setup>
import ProcessCompVersionManager from './ProcessCompVersionManager.vue'
import processCompApi from '@/api/comp/processCompApi'
import downloadUtil from "@/utils/downloadUtil";

const currentGroupCode = ref("");
const currentGroupName = ref("");

const compVersionDiag = ref(false);
const currentCompCode = ref();
const systemFlag = ref(false);
const groupTreeUrl = ref('/process/comp/group_tree')
const compDiag = ref({
	visible: false,
	viewFlag: false,
	compName: '',
	id: null,
	icon: '',
	groupCode: '',
	groupName: '',
	icon: '',
	compCode: ''
});
const keywords = ref("");

const columns = ref([
	{
		title: '名称',
		dataIndex: 'compName',
		key: 'compName',
		ellipsis: true,
	},
	{
		title: '编码',
		dataIndex: 'compCode',
		key: 'compCode',
		ellipsis: true,
	},
	{
		title: '分组名称',
		dataIndex: 'groupName',
		resizable: true,
		key: 'groupName',
		ellipsis: true,
	},
	{
		title: '分组编码',
		dataIndex: 'groupCode',
		key: 'groupCode',
		ellipsis: true,
	},
	{
		title: '系统',
		dataIndex: 'systemFlag',
		key: 'systemFlag',
		ellipsis: true,
		mapping: [{
			key: true,
			value: '是'
		},
		{
			key: false,
			value: '否'
		}],
	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		ellipsis: true,
		width: 400,
		fixed: 'right',
		buttonList: [
			{
				click: (field, record) => {
					handleClick(record)
				},
				render: (record) => {
					return "查看";
				}
			},
			{
				type: 'primary',
				click: (field, record) => {
					edit(record)
				},
				render: (record) => {
					return record.systemFlag ? null : "编辑";
				}
			},
			{
				click: (field, record) => {
					handleConfig(record)
				},
				type: 'primary',
				render: (record) => {
					return "配置";
				}
			},
			{
				click: (field, record) => {
					removeCompConfig(record)
				},
				render: (record) => {
					return record.systemFlag ? null : "删除";
				}
			},


		]
	},
])

const beforeUpload = () => {
	fileList.value = []
	return false;
}
const fileList = ref([

])
const { proxy } = getCurrentInstance();
const selectTree = async (id, code, name) => {
	if (code == 'ALL') {
		code = null;
	}
	currentGroupCode.value = code;
	currentGroupName.value = name;
	refresh();

}
const tableRef = ref()

const refresh = () => {
	tableRef.value.refresh(true)
}


const queryCompList = async () => {
	const data = await processCompApi.queryCompList({
		groupCode: currentGroupCode.value
	})
	return data;
}

const handleConfig = (row) => {
	//现在需要弹出 版本列表，并可以编辑
	compVersionDiag.value = true
	currentCompCode.value = row.compCode
	systemFlag.value = row.systemFlag;
	// nextTick(() => {
	// 	proxy.$refs.versionManager.refresh(row.compCode, row.systemFlag)
	// })
}

const progress = (a) => {
	//this.uploadFile = a;
	let file = fileList.value[0].originFileObj
	let reader = new FileReader()
	// abort none 中断读取
	// readAsBinaryString file 将文件读取为二进制码，通常我们将它传送到后端，后端可以通过这段字符串存储文件
	// readAsDataURL file 将文件读取为 DataURL，一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件
	// readAsText file, [encoding] 将文件读取为文本，读取的结果即是这个文本文件中的内容
	reader.readAsDataURL(file)
	// onabort 中断时触发
	// onerror 出错时触发
	// onload 文件读取成功完成时触发
	// onloadend 读取完成触发，无论成功或失败
	// onloadstart 读取开始时触发
	// onprogress 读取中
	reader.onload = (e) => {
		// 读取文件内容
		const base64String = e.target.result
		compDiag.value.icon = base64String;
	}
};


const removeCompConfig = async (row) => {
	const data = await processCompApi.removeCompConfig({
		id: row.id
	})
	// console.log(data);
	// this.$set(this, "tableData", data);
	refresh()
}

const downloadDemo = async () => {
	const blob = await processCompApi.downloadDemo();
	downloadUtil.resultDownload(blob);
	//
	// var downloadElement = document.createElement('a')
	// var href = window.URL.createObjectURL(blob) //创建下载的链接
	// downloadElement.href = href
	// downloadElement.download = 'demo.zip' //定义文件名
	// document.body.appendChild(downloadElement)
	// downloadElement.click() //点击下载
	// document.body.removeChild(downloadElement) //下载完成移除元素
	// window.URL.revokeObjectURL(href) //释放掉blob对象
}


const add = () => {
	fileList.value = [];
	compDiag.value = {}
	compDiag.value.visible = true;
	compDiag.value.groupCode = currentGroupCode.value;
	compDiag.value.groupName = currentGroupName.value;
}
const handleClick = async (row) => {

	await edit(row)
	compDiag.value.viewFlag = true
}
const edit = async (row) => {
	fileList.value = [];
	const data = await processCompApi.getById({
		id: row.id,
		systemFlag: row.systemFlag,
		version: row.version
	})
	compDiag.value = data;
	compDiag.value.visible = true
	nextTick(() => {
		const c = document.querySelector(".iconView svg");
		if (c) {
			c.setAttribute("width", "50px")
			c.setAttribute("height", "50px")
		}
	})
}


const saveComp = async () => {
	if (compDiag.value.viewFlag) {
		compDiag.value.viewFlag = false
		compDiag.value.visible = false
		return
	}
	if (!compDiag.value.compName) {
		proxy.$message.error('请输入名称')
		return
	}
	if (!compDiag.value.compCode) {
		proxy.$message.error('请输入组件编码')
		return
	}
	if (!compDiag.value.groupCode) {
		proxy.$message.error('请选择分组')
		return
	}
	if (!compDiag.value.groupName) {
		proxy.$message.error('请选择分组')
		return
	}

	await processCompApi.save(compDiag.value)

	compDiag.value = {};
	compDiag.visible = false
	compDiag.id = null
	refresh()
}
</script>

<style scoped></style>
